<template>
  <div>
    <div>
      <div class="title">筛选条件配置</div>
      <div class="filter_contianer">
        <div class="filter_row">
          <div class="filter_item">
            <span class="filter_label">行元素类型</span>
            <div class="element_filter">
              <div
                v-for="(item, index) of valueRowData"
                :key="index"
                class="value-item"
              >
                <span>
                  <img
                    style="margin-right: 4px; height: 16px"
                    :src="item.icon"
                  />
                  <span v-if="item.name">{{ locale.getTByKey(`modelConfig.${item.name}`, item.name) }}</span>
                </span>
              </div>
              <div
                v-if="!diagramCustomizationManagementModel.isModelDisabled"
                class="add-btn"
              >
                <img
                  src="statics/icons/app/iconmore.png"
                  class="g-pointer"
                  @click="handleChooseType(1)"
                />
              </div>
            </div>
          </div>
          <div class="filter_item">
            <span class="filter_label">列元素类型</span>
            <div class="element_filter">
              <div
                v-for="(item, index) of valueColumnData"
                :key="index"
                class="value-item"
              >
                <span>
                  <img
                    style="margin-right: 4px; height: 16px"
                    :src="item.icon"
                  />
                  <span v-if="item.name">{{ locale.getTByKey(`modelConfig.${item.name}`, item.name) }}</span>
                </span>
              </div>
              <div
                v-if="!diagramCustomizationManagementModel.isModelDisabled"
                class="add-btn"
              >
                <img
                  src="statics/icons/app/iconmore.png"
                  class="g-pointer"
                  @click="handleChooseType(2)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="filter_row">
          <div class="filter_item">
            <span class="filter_label">关系类型</span>
            <div class="element_filter">
              <div class="value-item">
                <span>
                  {{ relationCriterionView }}
                </span>
              </div>
              <div
                v-if="!diagramCustomizationManagementModel.isModelDisabled"
                class="add-btn"
              >
                <img
                  src="statics/icons/app/iconmore.png"
                  class="g-pointer"
                  @click="handleAdd"
                />
              </div>
            </div>
          </div>
          <div class="filter_item">
            <div class="filter_item">
              <span>关系方向</span>
              <MDropdown
                class="_input _dropdown"
                style="margin-right: 10px"
                :disabled="diagramCustomizationManagementModel.isModelDisabled"
              >
                <div
                  class="g-jc-c g-ai-c g-pd-lr-4"
                  style="height: 100%"
                >
                  <span
                    style="width: 95%"
                    class="g-one-line"
                  >
                    {{ $t(diagramMatrixModel.relationDirection?.label || "") }}
                  </span>
                  <img
                    src="statics/header/icontriangle.svg"
                    :class="disabled ? 'disabled' : 'g-pointer'"
                  />
                </div>
                <template #dropdown>
                  <MDropdownMenuItem
                    v-for="item in MatrixDirectionList"
                    :key="item.value"
                    :command="item.value"
                    :closeOnClick="true"
                    :selected="item.value === diagramMatrixModel.relationDirection?.value"
                    @click="handleClickCondition(item as any)"
                  >
                    {{ $t(item.label) }}
                  </MDropdownMenuItem>
                </template>
              </MDropdown>
            </div>
            <div
              class="filter_item"
              style="padding-right: 0"
            >
              <span>显示元素</span>
              <MDropdown
                class="_input _dropdown"
                :disabled="diagramCustomizationManagementModel.isModelDisabled"
              >
                <div
                  :class="{ disabled: disabled }"
                  class="g-jc-c g-ai-c g-pd-lr-4"
                  style="height: 100%"
                >
                  <span
                    style="width: 95%"
                    class="g-one-line"
                  >
                    {{ $t(diagramMatrixModel.showElement?.label || "") }}
                  </span>
                  <img
                    src="statics/header/icontriangle.svg"
                    :class="disabled ? 'disabled' : 'g-pointer'"
                  />
                </div>
                <template #dropdown>
                  <MDropdownMenuItem
                    v-for="it in MatrixShowElementsList"
                    :key="it.value"
                    :command="it.value"
                    :closeOnClick="true"
                    :selected="it.value === diagramMatrixModel.showElement?.value"
                    @click="handleShowElementsChange(it as any)"
                  >
                    {{ $t(it.label) }}
                  </MDropdownMenuItem>
                </template>
              </MDropdown>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { modelService } from "@/modules/model/service";
import { ModelData } from "@/constants/types";
import { MatrixShowElementsList, MatrixDirectionList } from "@/mdesign-lib/mdesign-app.umd.js";
import { computed, ref, watch } from "vue";
import { modelTreeSelectWindow } from "../../../modelTreeSelect";
import { relationCriteriaWindow } from "../../../relationCriteria";
import { DiagramCustomizationManagementModel } from "../../DiagramCustomizationManagementModel";
import { locale } from "@/util/locale";
import { parseRC2Form } from "@/util/relationCriteria";
import { RelationCriteriaType } from "@/constants/Enums";

const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();
const disabled = computed(() => {
  return props.diagramCustomizationManagementModel.isModelDisabled;
});

const valueRowData = ref<ModelData[]>([]);
const valueColumnData = ref<ModelData[]>([]);

const diagramMatrixModel = computed(() => props.diagramCustomizationManagementModel.diagramMatrixConfigurationModel);

watch(
  () => diagramMatrixModel.value.rowElementIds,
  newVal => {
    modelService
      .getModelDatas(props.diagramCustomizationManagementModel.queryParams.projectId, newVal)
      .then(res => (valueRowData.value = res));
  },
  { immediate: true }
);
watch(
  () => diagramMatrixModel.value.columnElementIds,
  newVal => {
    modelService
      .getModelDatas(props.diagramCustomizationManagementModel.queryParams.projectId, newVal)
      .then(res => (valueColumnData.value = res));
  },
  { immediate: true }
);
// row传1 column传2
const handleChooseType = (type: number) => {
  modelTreeSelectWindow.popup(
    {
      loadMethod: "getElementsAndStereotypes",
      loadParams: JSON.stringify({
        row: {},
        projectId: props.diagramCustomizationManagementModel.queryParams.projectId
      }),
      checkedIds: type === 1 ? [...diagramMatrixModel.value.rowElementIds] : [...diagramMatrixModel.value.columnElementIds],
      checkable: true,
      attrTip: "ElementType",
      title: "选择元素类型",
      delay: true
    },
    async data => {
      if (!data.success) return;
      if (type === 1) {
        diagramMatrixModel.value.rowElementIds = data.selectedId;
      } else {
        diagramMatrixModel.value.columnElementIds = data.selectedId;
      }
      modelTreeSelectWindow.done();
    }
  );
};

const handleClickCondition = item => {
  diagramMatrixModel.value.relationDirection = item;
};
const handleShowElementsChange = item => {
  diagramMatrixModel.value.showElement = item;
};
const relationCriterionView = ref<string>("");
watch(
  () => diagramMatrixModel.value.relationCriteria,
  newVal => {
    if (!newVal) return [];
    relationCriterionView.value = parseRC2Form(newVal);
  },
  { immediate: true }
);

const handleAdd = () => {
  const validType: string[] = [];
  valueColumnData.value.forEach(item => {
    if (!validType.includes(item.id)) {
      validType.push(item.id);
    }
  });
  valueRowData.value.forEach(item => {
    if (!validType.includes(item.id)) {
      validType.push(item.id);
    }
  });
  relationCriteriaWindow
    .popup({
      projectId: props.diagramCustomizationManagementModel.queryParams.projectId,
      attrTip: "retrospectType",
      title: "关系类型",
      type: RelationCriteriaType.DIAGRAM_MATRIX_VIEW_CONFIG,
      relateModelIds: diagramMatrixModel.value.rowElementIds.concat(diagramMatrixModel.value.columnElementIds).distinct().join(","),
      viewData: diagramMatrixModel.value.relationCriteria,
      validType: validType.join(",")
    })
    .then(async res => {
      if (!res.success) return;
      diagramMatrixModel.value.relationCriteria = res.relationCriteria as string;
    });
};
</script>
<style lang="scss">
.filter_contianer {
  border: 1px solid #dcdfe6;
  width: 100%;
  padding-right: 30px;
  padding-left: 11px;
  line-height: 60px;
  .filter_row {
    width: 100%;
    .filter_item {
      width: 50%;
      display: inline-flex;
      align-items: center;
      padding-right: 12px;
      .filter_label {
        display: inline-block;
        width: 18%;
      }
    }
  }
  .element_filter {
    border: 1px solid #dcdfe6;
    display: inline-block;
    height: 24px;
    width: 82%;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
    .value-item {
      display: inline-block;
      height: 16px;
      margin: 4px 10px 4px 4px;
      line-height: 16px;
      img {
        margin-right: 6px;
        line-height: 16px;
        vertical-align: middle;
      }
      span {
        line-height: 14px;
        vertical-align: middle;
      }
    }
    .add-btn {
      line-height: 1;
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
    }
  }
}

.title {
  height: 24px;
  line-height: 24px;
  padding-left: 12px;
  margin: 12px 0 12px;
}
._input._dropdown {
  height: 26px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  margin-left: 8px;
  flex-grow: 1;
}
</style>
